<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章详情',active='publish'">
<header th:replace="admin/fragments/header::headerFragment(${title},${active})"></header>
<link th:href="@{/resources/admin/plugins/tagsinput/jquery.tagsinput.css}" rel="stylesheet"/>
<link th:href="@{/resources/admin/plugins/select2.dist.css/select2-bootstrap.css}" rel="stylesheet"/>
<link th:href="@{/resources/admin/plugins/toggles/toggles.css}" rel="stylesheet"/>

<link href="//cdn.bootcss.com/multi-select/0.9.12/css/multi-select.css" rel="stylesheet"/>
<link href="//cdn.bootcss.com/select2/3.4.8/select2.min.css" rel="stylesheet"/>
<link th:href="@{/resources/admin/plugins/md/css/style.css}" rel="stylesheet"/>
<!-- editor.md -->
<link th:href="@{/resources/admin/editormd/css/editormd.css}" rel="stylesheet"/>
<style>
    #tags_tagsinput {
        background-color: #fafafa;
        border: 1px solid #eeeeee;
    }

    #tags_addTag input {
        width: 100%;
    }

    #tags_addTag {
        margin-top: -5px;
    }
</style>
<body >class="fixed-left"
<div id="wrapper">
    <div class="content-wrap">
        <div id="content" class="content">
            <div id="posts" class="posts-expand">
                <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
                    <div class="post-block" style="opacity: 1; display: block;">
                        <header class="post-header" style="opacity: 1; display: block; transform: translateY(0px);">
                            <h1 class="post-title" itemprop="name headline" th:text="${article.title}"></h1>
                            <div class="post-meta">
                                <span class="post-time">
                                    <span class="post-meta-item-icon">
                                    <i class="fa fa-calendar-o"></i>
                                    </span>
                                    <span class="post-meta-item-text">发表于</span>
                                    <time th:text="${article.created}" title="创建于" datetime="2018-07-07T15:40:56+08:00">
                                    </time>
                                </span>
                                <span class="post-category">
                                    <span class="post-meta-divider">|</span>
                                    <span class="post-meta-item-icon">
                                        <i class="fa fa-folder-o"></i>
                                    </span>
                                    <span class="post-meta-item-text">分类于</span>
                                    <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                                        <a th:href="@{'/blog/categories/'} + ${article.categories}" itemprop="url" rel="index">
                                            <span itemprop="name" th:text="${article.categories}"></span>
                                        </a>
                                    </span>
                                </span>
                            </div>
                        </header>
                        <div class="post-body" itemprop="articleBody" style="opacity: 1; display: block; transform: translateY(0px);">
                            <th:block th:utext="${@commons.article(article.content)}"></th:block>
                        </div>
                    </div>
                </article>
                <div class="post-spread">
                </div>
            </div>
        </div>
        <div class="comments" id="comments" style="opacity: 1; display: block;">
            <div id="comments-content" class="segment">
                <h3 class="dividing">评论</h3>
                <th:block th:if="${commentsList}">
                    <div th:each="commentsList : ${commentsList}" class="comment">
                        <a class="avatar">
                            <img th:src="@{/blog/image/avatar.png}">
                        </a>
                        <div class="content">
                            <a th:href="${commentsList.url}" target="_blank" class="author">
                                <span th:text="${commentsList.author}"></span>
                            </a>
                            <div class="metadata">
                                <span class="date" th:text="${commentsList.created}"></span>
                            </div>
                            <div class="text" th:text="${commentsList.content}"></div>
                        </div>
                    </div>
                </th:block>
            </div>
            <div class="comment-form">
                <input type="hidden" name="coid" id="coid">
                <input type="hidden" name="id" id="id" th:value="${article.id}">
                <input type="hidden" name="_csrf_token" id="csrf_token" th:value="${_csrf_token}">
                <div class="field">
                    <textarea id="comment-content" class="form-control" name="content" placeholder="请输入评论信息..." cols="30" rows="7"
                              required="required"
                              aria-required="true"
                              th:utext="${comments!=null and comments.content !=null}?${comments.content}: ''"
                    ></textarea>
                </div>
                <div class="fields">
                    <div class="field">
                        <input id="nickname"  type="text" name="nickname" placeholder="昵称"
                               required="required"
                               aria-required="true"
                               th:utext="${comments.author!=null and comments.author !=null}?${comments.author}: ''"
                        >
                    </div>
                    <!--                    <div class="field">-->
                    <!--                        <input id="email" required="required" type="email" name="email" placeholder="邮箱">-->
                    <!--                    </div>-->
                    <div class="field">
                        <input id="url" type="url" name="url" placeholder="网址"
                               required="required"
                               aria-required="true"
                               th:utext="${comments.url!=null and comments.url !=null}?${comments.url}: ''"
                        >
                    </div>
                </div>
                <div class="comment-button">
                    <button onclick="commentClick()">发布</button>
                    <!--                    <button onclick="alert('来了老弟')">发布</button>-->
                    <!--                    <button type="button" class="btn btn-primary waves-effect waves-light"-->
                    <!--                            th:onclick="'javascript:commentClick()'">-->
                    <!--                        上传评论-->
                    <!--                    </button>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/fragments/footer :: footer"></div>
<script type="text/javascript">
    $(function() {
        editormd("my-editormd", {//注意1：这里的就是上面的DIV的id属性值
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "/admin/editormd/lib/",//注意2：你的路径
            saveHTMLToTextarea : true,//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], //图片上传格式
            imageUploadURL: "/admin/attach/uploadfile",
            onload: function (obj) { //上传成功之后的回调
            }
        });
    });
</script>
<script th:src="@{/resources/admin/plugins/tagsinput/jquery.tagsinput.min.js}"></script>
<script th:src="@{/resources/admin/plugins/jquery-multi-select/jquery.quicksearch.js}"></script>

<!-- editor.md -->
<script th:src="@{/resources/admin/editormd/src/editormd.js}"></script>

<script th:src="@{//cdn.bootcss.com/multi-select/0.9.12/js/jquery.multi-select.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/select2/3.4.8/select2.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/jquery-toggles/2.0.4/toggles.min.js}"></script>
<script th:src="@{/resources/admin/js/article.js}"></script>
</body>
</html>
